<template>
    <el-dialog class="dialog" title="公共货品库" center="center" :visible.sync="dialogTableVisible">
        <div>
            <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
                <el-row>
                    <el-form-item>
                        <el-button type="primary" plain icon="el-icon-folder" @click="handleCopyServers" size="mini">
                            复制产品
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-cascader clearable filterable placeholder="请选择部门" size="mini" v-model="filters.departIds" :options="departList"
                            :props="{ label:'departName',value:'departId',checkStrictly:true}">

                        </el-cascader>
                    </el-form-item>
                </el-row>

                <el-form-item prop="commonServerCode">
                    <el-input size="mini" v-model=" filters.commonServerCode " placeholder="产品编号"></el-input>
                </el-form-item>
                <el-form-item prop="name">
                    <el-input size="mini" v-model=" filters.name " placeholder="产品名称"></el-input>
                </el-form-item>
                <el-form-item prop="classifyIds">
                    <el-cascader v-model=" filters.classifyIds " size="mini" clearable placeholder="请选择服务分类"
                        @change=" getOption " :options=" serverClassifyList "
                        :props=" { checkStrictly: true, value: 'id', label: 'name' } ">
                    </el-cascader>
                </el-form-item>
                <el-form-item prop="visitFlag">
                    <el-checkbox v-model=" filters.visitFlag ">上门</el-checkbox>
                </el-form-item>
                <el-form-item prop="shopFlag">
                    <el-checkbox v-model=" filters.shopFlag ">到店</el-checkbox>
                </el-form-item>
                <el-form-item prop="remoteFlag">
                    <el-checkbox v-model=" filters.remoteFlag ">远程</el-checkbox>
                </el-form-item>
                <el-form-item prop="fastFlag">
                    <el-checkbox v-model=" filters.fastFlag ">紧急通知</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" icon="el-icon-search" type="primary" @click=" onSearch ">查询</el-button>
                    <el-button size="mini" icon="el-icon-refresh-left" @click=" resetForm ">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 列表 -->
        <el-table ref="tableList" :data=" dataList " :fit=" true " highlight-current-row
            @selection-change=" handleSelectionChange " empty-text="对不起，没有找到相关数据！">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column align="center" label="产品编号" prop="commonServerCode">
            </el-table-column>
            <el-table-column align="center" label="产品图片" width="160">
                <template slot-scope="scope">
                    <div class="img-wrapper">
                        <el-image title="点击可预览" :src=" scope.row.mainImage " :preview-src-list=" [scope.row.mainImage] "
                            :z-index=" scope.$index ">

                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="产品名称" prop="name">
            </el-table-column>
            <el-table-column align="center" label="产品分类">
                <template slot-scope="scope">
                    {{ scope.row.serverClassifyName }}-{{ scope.row.thirdClassifyName }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="产品简介" prop="introduce" width="170">

            </el-table-column>
            <el-table-column align="center" label="上门/到店/远程/紧急通知" width="120">
                <template slot-scope="scope">
                    <div>
                        <el-tag size="mini" effect="dark" v-if=" scope.row.visitFlag == 1 ">
                            上门
                        </el-tag>
                        <el-tag size="mini" effect="dark" v-if=" scope.row.shopFlag == 1 " type="success">
                            到店
                        </el-tag>
                        <div></div>
                        <el-tag size="mini" effect="dark" v-if=" scope.row.remoteFlag == 1 " type="warning">
                            远程
                        </el-tag>
                        <el-tag size="mini" effect="dark" v-if=" scope.row.fastFlag == 1 " type="danger">
                            急
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="是否需配送费" width="120">
                <template slot-scope="scope">
                    <div>
                        <el-tag size="mini" effect="dark" v-if=" scope.row.deliveryFlag == 0 " type="info">
                            否
                        </el-tag>
                        <el-tag size="mini" effect="dark" v-if=" scope.row.deliveryFlag == 1 ">
                            是
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="原价" prop="price"></el-table-column>
            <el-table-column align="center" label="售价" prop="salePrice"></el-table-column>
            <el-table-column align="center" label="成本价" prop="costPrice"></el-table-column>
            <el-table-column align="center" label="包装费" prop="packageFee"></el-table-column>
            <!--<el-table-column align="center" label="配送费" prop="deliveryFee"></el-table-column>-->
            <!-- <el-table-column align="center" label="商户折扣比例" prop="discount"></el-table-column> -->
        </el-table>

        <!-- 分页工具条 -->
        <el-pagination style="background-color: #F2F2F2;" :background=" true " @size-change=" handleSizeChange "
            @current-change=" handleCurrentChange " :current-page=" page.pageNo " :page-sizes=" [20, 50, 100] "
            :page-size=" page.pageSize " layout="total, sizes, jumper,->,prev,pager,next"
            :total=" page.pageTotal "></el-pagination>
    </el-dialog>
</template>
<script>
import CommonServerApi from '@/api/goods/commonServer';
import ServerClassifyApi from "@/api/server/serverClassify";
import BusinessDepartApi from "@/api/business/depart"
export default {
    props: {
        // serverClassifyIds:{
        //     type:Array|String,
        // },
        businessId:{
            type:[Number,String],
        },
        variantState: {
            type: Number
        }
    },
    data() {
        return {
            dataList: [],
            dialogTableVisible: false,
            filters: {
                commonServerCode: "",
                name: "",
                classifyIds: [],
                visitFlag: false,
                shopFlag: false,
                remoteFlag: false,
                fastFlag: false,
                departIds: [],
            },

            departList: [],
            selectedList: [],
            serverClassifyList: [],
            page: {
                pageNo: 1,
                pageTotal: 0,
                pageSize: 20
            },
        }
    },
    components: {},
    created() {
    },
    methods: {
        // 分类选中
        getOption(e) {
            this.filters.classifyIds = e
        },
        resetForm() {
            this.$refs.searchForm.resetFields()
        },
        onSearch() {
            this.page.pageNo = 1;
            this.listData();
        },
        handleSizeChange(size) {
            let _this = this
            _this.page.pageSize = size
            _this.listData()
        },
        handleCurrentChange(val) {
            let _this = this
            _this.page.pageNo = val
            _this.listData()
        },
        // 获取产品分类列表
        getServerClassifyList() {
            let params = {
                level: 2,
                businessId:this.businessId,
                // serverClassifyIds:this.serverClassifyIds?this.serverClassifyIds.join(","):''
            }
            ServerClassifyApi.listServerClassifyTree(params).then(res => {
                this.serverClassifyList = res.data
            })
        },
        // 获取部门列表
        getDepartList() {
            BusinessDepartApi.listMangerTree({businessId:this.businessId}).then(res=>{
                this.setDisabled(res.data)
                this.departList = res.data
            })
        },
        setDisabled(list) {
            list.forEach(item => {
                if (!item.power) {
                    item.disabled = true
                }
                if (item.children) {
                    this.setDisabled(item.children)
                }
            })
        },
        handleSelectionChange(arr) {
            this.selectedList = arr
        },
        listData() {
            // 获取列表数据
            let _this = this
            let cond = {
                pageNo: _this.page.pageNo,
                pageSize: _this.page.pageSize,
                serverClassifyId: _this.filters.classifyIds[0] ? _this.filters.classifyIds[0] : "",
                thirdClassifyId: _this.filters.classifyIds[1] ? _this.filters.classifyIds[1] : "",
                businessId:_this.businessId,
                // serverClassifyIds:_this.serverClassifyIds?_this.serverClassifyIds.join(","):''
            }
            cond.name = _this.filters.name
            cond.visitFlag = _this.filters.visitFlag ? 1 : ''
            cond.shopFlag = _this.filters.shopFlag ? 1 : ''
            cond.remoteFlag = _this.filters.remoteFlag ? 1 : ''
            cond.fastFlag = _this.filters.fastFlag ? 1 : ''
            cond.commonServerCode = _this.filters.commonServerCode
            if (this.variantState) {
                cond.variantState = 1
            }
            CommonServerApi.listCommonServer(cond)
                .then(res => {
                    _this.dataList = res.data.list
                    _this.page.pageTotal = res.data.total
                    setTimeout(() => {
                        _this.$refs.tableList.doLayout()
                    })
                }).catch(err => {
                })

        },
        handleCreate() {
            this.dialogTableVisible = true; // 显示弹出框
            this.listData()
            this.getServerClassifyList()
            this.departList = []
            this.filters.departIds = []

            if(this.businessId){
                this.getDepartList()
            }

        },
        handleCopyServers() {
            this.dialogTableVisible = false
            const params = {
                list: this.selectedList,
                departId:this.filters.departIds[0]||"",
                firstDepartId:this.filters.departIds[1]||"",
                secondDepartId:this.filters.departIds[2]||"",
                thirdDepartId:this.filters.departIds[3]||"",

            }
            this.$emit("getServerList", params)

        }

    }
}
</script>

<style lang="scss" scoped>
.dialog {
    &::v-deep .el-dialog {
        width: max-content;
    }
    .demo-form-inline{
        margin-bottom:18px;
        .el-form-item{
            margin-bottom:3px
        }
    }

    .el-radio-group {
        margin-left: 10px;

        .el-radio {
            margin-right: 20px;
        }
    }

    .img-wrapper {
        width: 80px;
        height: 60px;
        overflow: hidden;
        border-radius: 3px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;

        .el-image {
            width: 100%;

            &::v-deep img {
                width: 100%;
                height: auto;
            }
        }
    }
}
</style>

